<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #container{
            width: 350px;
            height: 480px;
            /* 背景属性 */
            background-image: url("img/bg.jpg");
            /* 设置背景图大小  px   %   contain cover
             第一个值代表图片宽度 第二个值代表图片高度*/
            background-size: 100% 100%;
            position: relative;
            margin: 0 auto;
        }
        #head{
            position: absolute;
            left: 50px;
            top: 150px;
        }
        #head span{
            width: 40px;
            height: 26px;
            display: inline-block;
            background-image: url('img/bird0.png');
            /* 绝对定位  默认时根据当前浏览器可视化窗口定位的
            但是  如果一个元素为绝对定位  当他的外层有任意一个定位时
            （relative/absolute/fixed)
            这个时候 该元素就应该时相对于她外层的元素进行定位
             */
            position: absolute;
            top: 20px;
            right: 0;
        }
        #scoring{
            position: absolute;
            left: 50%;
            top: 40px;
            transform: translateX(-50%);
            font-size: 50px;
        }
        #menu{
            position: absolute;
            left: 40%;
            top: 60%;
        }
        #bird{
            display: none;
        }
    </style>
</head>
<body>
    <div id="container">
        <!-- 头部 -->
        <div id="head">
            <img src="./img/head.jpg" alt="">
            <!-- head图片后面的小鸟 -->
            <span></span>
        </div>
        <!-- 分数 -->
        <div id="scoring">
            0
        </div>
        <!-- 开始按钮区域 -->
        <div id="menu">
            <img src="./img/start.jpg" alt="">
        </div>
        <!-- 飞翔的小鸟本鸟 -->
        <div id="bird">
            <img src="./img/down_bird1.png" alt="">
        </div>
        <!-- 管道 -->
    </div>
</body>
</html>